<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>“快检”二维码</title>
    <script src="js/jquery2.1.4.js"></script>
    <script src="js/jquery.qrcode.js"></script>
    <!--   有上面两个 js文件，就足够生成二维码， 下面这是汉化包js  -->
    <script src="js/utf.js"></script>
</head>
<style type="text/css">
.inputo{
	height:10%;
	width:85%;
	font-size:3rem ;
	text-align:center
}
</style>
<body>
     <div id="biaoti"style=" text-align:center; font-size :120px;font-weight: 900;">"快检"二维码</div>
	 <div style=" text-align:center;padding-top: 5%;"><input type="text" id="in1"   value="请输入姓名"  class="inputo" onfocus="qk(this)"/> </div>
	 
	 <div style=" text-align:center ;padding-top: 5%;" ><input id="idcard"  type="text" value="请输入身份证号码" class="inputo" onfocus="qk(this)"/> </div>
	  
	 <div id="qrcode"style="text-align:center;padding-top: 5%;></div>
	 <div style=" text-align:center"><button id="button1" style="width:80%;height:15%; font-size:70px " onclick="shengcheng()">点击生成</button></div>
	<script>

function qk(x){
	x.value="";
}

function shengcheng() {

	    var idcard = document.getElementById("idcard").value
		<!--  二维码信息设置  -->
	    var config ={
	        width:800,
	        height:800,
	        text: idcard, //text就表示二维码中存储的数据  必须传递
	        correctLevel: 1,  // 取值为0|1|2|3 表示二维码的纠错级别0:L/1:M/2:Q/3:H ,默认0  可选参数
	        background:"#FFFFFF",//默认白色, 表示二维码的后景颜色 可选参数
	        foreground:"#000000",//默认黑色, 表示二维码的前景颜色 可选参数
	    };
	    // jq 找到id 为qrcode的 div，执行 二维码生成
		$('#button1').remove();
		$("#qrcode").empty();	
		$("#qrcode").qrcode(config);
		$("#in1,#idcard").prop('disabled','disabled');

}
	</script>

</body>
</html>